<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">

<head>
    <th:block th:include="common/common_head :: commonHeader('编辑组织机构')"/>
</head>

<body class="gray-bg">

<div class="wrapper wrapper-content animated fadeInRight">
    <form class="form-horizontal" method="post" th:action="@{/sys/dept/update}" id="deptForm">
        <div class="row">
            <div class="col-sm-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>机构信息</h5>
                    </div>
                    <div class="ibox-content">
                        <input type="hidden" name="deptId" th:value="${dept.deptId}">
                        <div class="form-group">
                            <label class="col-sm-3 control-label"><span class="required-sign">*</span>机构名称：</label>
                            <div class="col-sm-6">
                                <input name="name" th:value="${dept.name}" type="text" placeholder="机构名称" class="form-control">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label"><span class="required-sign">*</span>机构电话：</label>
                            <div class="col-sm-6">
                                <input name="mobile" th:value="${dept.mobile}" type="text" placeholder="机构电话" class="form-control">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label"><span class="required-sign">*</span>上级机构：</label>
                            <div class="col-sm-6">
                                <input type="hidden" th:value="${dept.parentId}" name="parentId" id="parentId"
                                       class="form-control"/>
                                <input onclick="addPid()" th:value="${dept.parentName}" readonly="readonly" type="text"
                                       name="parentName"
                                       id="parentName" placeholder="请选择" class="form-control"/>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label"><span class="required-sign">*</span>排序码：</label>
                            <div class="col-sm-6">
                                <input name="orderNum" th:value="${dept.orderNum}" type="text" placeholder="排序码" class="form-control">
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-3 control-label"><span class="required-sign">*</span>机构地址：</label>
                            <div class="col-sm-2">
                                <input id="provinceValue" th:value="${dept.provinceCode}" type="hidden">
                                <input id="cityValue" th:value="${dept.cityCode}" type="hidden">
                                <input id="areaValue" th:value="${dept.areaCode}" type="hidden">
                                <select class="form-control m-b" id="provinceCode" name="provinceCode">
                                    <option value=''>请选择省份</option>
                                </select>
                            </div>
                            <div class="col-sm-2">
                                <select class="form-control m-b" id="cityCode" name="cityCode" th:value="${dept.cityCode}">
                                    <option value=''>请选择城市</option>
                                </select>
                            </div>
                            <div class="col-sm-2">
                                <select class="form-control m-b" id="areaCode" name="areaCode" th:value="${dept.areaCode}">
                                    <option value=''>请选择区县</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-offset-3 col-sm-6">
                                <input id="address" name="address" th:value="${dept.address}" type="text" placeholder="详细地址" class="form-control">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label"><span class="required-sign">*</span>经纬度：</label>
                            <div class="col-sm-2">
                                <input id="longitude" name="longitude" th:value="${dept.longitude}" readonly placeholder="经度" class="form-control">
                            </div>
                            <div class="col-sm-2">
                                <input id="latitude" name="latitude" th:value="${dept.latitude}" readonly placeholder="纬度" class="form-control">
                            </div>
                            <div class="col-sm-2">
                                <button onclick="showMap()" class="btn btn-default " type="button"><i class="fa fa-map-marker"></i>&nbsp;&nbsp;百度地图
                                </button>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-3 control-label"><span class="required-sign">*</span>成立时间：</label>
                            <div class="col-sm-6">
                                <input id="foundingTime" th:value="${dept.foundingTime != '' and dept.foundingTime != null ? #dates.format(dept.foundingTime, 'yyyy-MM-dd') : ''}" name="foundingTime" type="text" class="form-control laydate-icon">
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="col-sm-offset-3 col-sm-6">
                                <button class="btn btn-primary" type="button" onclick="editDept()">保存</button>
                                <button class="btn btn-primary" type="button" onclick="Dialog.closeFrame(window.name)">取 消</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>

<!--引入公共js-->
<div th:include="common/onload_js :: onloadJS"></div>
<!-- Chosen -->
<script th:src="@{/static/js/plugins/chosen/chosen.jquery.js}"></script>
<script type="text/javascript">
    $(document).ready(function () {
        var provinceValue = $("#provinceValue").val();
        var cityValue = $("#cityValue").val();
        var areaValue = $("#areaValue").val();
        // 服务地址信息
        Page.ajaxPOST(ctxPath + "/sys/address/getAllProvince", null, function (res) {
            $("#provinceCode").text("");
            var html = "<option value=''>请选择省份</option>";
            var provinceList = res.provinceList;
            for (var i = 0; i < provinceList.length; i++) {
                html += "<option value='" + provinceList[i].provinceCode + "'>" + provinceList[i].province + "</option>";
            }
            $("#provinceCode").append(html);
            if (provinceValue != null && provinceValue != "") {
                $("#provinceCode").val(provinceValue);
                Page.ajaxPOST(ctxPath + "/sys/address/getCityListByProvinceCode/" + provinceValue, null, function (data1) {
                    $("#cityCode").text("");
                    var html = "<option value=''>请选择城市</option>";
                    var cityList = data1.cityList;
                    for (var i = 0; i < cityList.length; i++) {
                        html += "<option value='" + cityList[i].cityCode + "'>" + cityList[i].city + "</option>";
                    }
                    $("#cityCode").append(html);
                    if (cityValue != null && cityValue != null) {
                        $("#cityCode").val(cityValue);
                    }
                    Page.ajaxPOST(ctxPath + "/sys/address/getAreaListByCityCode/" + cityValue, null, function (data2) {
                        $("#areaCode").text("");
                        var html = "<option value=''>请选择区县</option>";
                        var areaList = data2.areaList;
                        for (var i = 0; i < areaList.length; i++) {
                            html += "<option value='" + areaList[i].areaCode + "'>" + areaList[i].area + "</option>";
                        }
                        $("#areaCode").append(html);
                        $("#areaCode").val(areaValue);
                    })
                })
            }
        })
        $("#provinceCode").change(function () {
            var provinceCode = $("#provinceCode").val();
            Page.ajaxPOST(ctxPath + "/sys/address/getCityListByProvinceCode/" + provinceCode, null, function (res) {
                $("#cityCode").text("");
                var html = "<option value=''>请选择城市</option>";
                var cityList = res.cityList;
                for (var i = 0; i < cityList.length; i++) {
                    html += "<option value='" + cityList[i].cityCode + "'>" + cityList[i].city + "</option>";
                }
                $("#cityCode").append(html);

                $("#areaCode").text("");
                $("#areaCode").append("<option value=''>请选择区县</option>");
            })
        })

        $("#cityCode").change(function () {
            var city = $("#cityCode").val();
            Page.ajaxPOST(ctxPath + "/sys/address/getAreaListByCityCode/" + city, null, function (res) {
                $("#areaCode").text("");
                var html = "<option value=''>请选择区县</option>";
                var areaList = res.areaList;
                for (var i = 0; i < areaList.length; i++) {
                    html += "<option value='" + areaList[i].areaCode + "'>" + areaList[i].area + "</option>";
                }
                $("#areaCode").append(html);
            })
        })

        laydate.render({
            elem: '#foundingTime' //指定元素
        });
    });

    Page.validateForm("#deptForm",{
        tips:"确定保存？",
        rules: {
            name: {
                required: true
            },
            mobile:{
                required: true
            },
            foundingTime:{
                required: true
            },
            orderNum:{
                required: true
            },
            provinceCode:{
                required: true
            },
            cityCode:{
                required: true
            },
            areaCode:{
                required: true
            },
            longitude:{
                required: true
            },
            latitude:{
                required: true
            }

        },
        messages: {
            name: {
                required: "请输入机构名称"
            },
            mobile:{
                required: '请输入机构电话'
            },
            foundingTime:{
                required: '请输入成立时间'
            },
            orderNum:{
                required: '请输入排序码'
            },
            address:{
                required: '请输入地址'
            },
            provinceCode:{
                required: '请输入省份'
            },
            cityCode:{
                required: '请输入城市'
            },
            areaCode:{
                required: '请输入区县'
            },
            longitude:{
                required: '请以鼠标左键点击地图生成经纬度'
            },
            latitude:{
                required: '请以鼠标左键点击地图生成经纬度'
            }

        },
        submitSuccess:function(data){
            Dialog.msg("新建成功!",function(){
                Dialog.closeFrame(window.name)
            });
        }
    });

    //弹出资源树
    function addPid() {
        Dialog.openUrl("组织机构列表", ctxPath+"/modules/sys/dept/dept_select.html", {area: ['300px', '400px'],shadeClose:
        true});
    }

    function toDeptId(treeNode) {
        $("#parentId").val(treeNode.deptId);
        $("#parentName").val(treeNode.name);
    }

    function editDept() {
        if($("#deptForm").valid()) {
            Page.ajaxPOST(ctxPath+"/sys/dept/update", $("#deptForm").serialize(), function (res) {
                Dialog.msg("操作成功", function () {
                    parent.searchDept();
                    Dialog.closeFrame(window.name);
                })
            })
        }
    }

    function openImgSelector() {
        var index = Dialog.openUrl("图片选择", ctxPath+"/sys/user/openImagePop?picId="+$("#imageId").val(),
            {area: ['900px', '700px'],shadeClose:
                true});
    }

    function setImageUrl(dataUrl) {
        Page.ajaxPOST(ctxPath+"/sys/user/uploadAvatar", {'base64Data': dataUrl}, function (res) {
            $("#imageIdImg").attr("src", ctxPath+'/sys/user/getPic/'+res.result);
            $("#imageId").val(res.result);
        })
    }

    /**
     * 弹出地图
     */
    function showMap() {
        var index = Dialog.openUrl("百度地图", ctxPath + '/common/baidu_map.html',
            {area: ['900px', '500px'], maxmin: true});
    }

    /**
     * 回显地图定位信息
     * @param address
     * @param lng
     * @param lat
     */
    function locationMap(address, lng, lat) {
        $("#longitude").val(lng);
        $("#latitude").val(lat);
        $("#address").val(address);
    }
</script>

</body>
</html>
